<template>
  <div class="box">
    <!-- 这个是头部 -->
      <div class="header">
        <!-- 搜索框 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>
       <!-- 这个是主题 -->
      <div class="middler">
        <router-view />
      </div>
        <!-- 这个是尾部 -->
      <div class="footer">
        <router-link v-for="(item,index) in footerList" :key="(index)" :to="item.path">
          <span>{{item.name}}</span>
        </router-link>
      </div>
  </div>
</template>

<script>
export default {
  name:'home',
  data(){
    return {
      
        value: '',

        footerList:[
          {
            path: '/index',
            name: '首页',
          },
           {
            path: '/my',
            name: '我的',
          },
           {
            path: '/about',
            name: '空间',
          }
        ]
    }
  }

}
</script>


<style lang="scss" scoped>
.box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  height: 50px;
  border-bottom: 1px solid pink;
}
.middler{
  height: 560px;
  border-bottom: 1px solid pink;
  flex: 1;
  overflow-y: auto;
}
.footer{
  height: 50px;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
}
</style>
